<template>
    <div class="warp"><div class="logo"><img src="../../assets/images/logo.png"></div>
        <div class="bb-box">
            <div class="login-box">
                <ul class="lin-t1">
                    <li>用户登录</li>

                </ul>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">

                    <ul class="lb-box">
                        <li>
                            <p class="lbl-l1"></p>
                            <p class="lbl-r" >
                                <el-form-item prop="username">
                                <el-input v-model="ruleForm.username" placeholder="用户名">
                                    <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                                </el-input>
                                </el-form-item>
                            </p>
                        </li>
                        <li>
                            <p class="lbl-l2"></p>
                            <p class="lbl-r" style="width: 80%;float: left;">
                                <el-form-item prop="password">
                                    <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                                    </el-input>
                                </el-form-item>
                            </p><p class="wangji">忘记密码?</p>
                        </li>
<!--                        <li>-->

<!--                            <p class="lbl-yzl">-->
<!--                                <input type="text" value="验证码" >-->
<!--                            </p>-->
<!--                            <p class="lbl-yzr"><img src="../../assets/images/yzm.png"/></p>-->
<!--                        </li>-->
                        <p class="login-ti">
                            <el-checkbox v-model="checked">记住密码</el-checkbox>
                        </p>

                        <el-button class="login-but" type="primary" @click="submitForm('ruleForm')">登录</el-button>

                    </ul>
                </el-form>
        </div> </div>
        <div class="footer"><p style="float: left;margin-right: 15px;margin-left: 40%">版权所有：青海省人力资源和社会保障厅</p><p style="float: left">技术支持：万达信息股份有限公司</p></div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                checked:'',
                ruleForm: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {
            let checkTf = localStorage.getItem('checked')
            if(checkTf){
                this.getCookie();
                this.checked=true;
            }
            /*回车事件监听*/
            let _this = this;
            document.onkeydown = function (e) {
                if (e.keyCode === 13) {
                    _this.submitForm("ruleForm");
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid)
                    {
                        let loginParams = { username: this.ruleForm.username,password: this.ruleForm.password,user_status:'1'};
                        this.$fetch('/login', loginParams).then(res => {
                            // 登录成功
                            if(res) {
                                if(res.data.state=='success') {
                                    const self = this;
                                    //判断复选框是否被勾选 勾选则调用配置cookie方法
                                    if (self.checked == true) {
                                        localStorage.setItem('checked','true');
                                        //传入账号名，密码，和保存天数
                                        self.setCookie(self.ruleForm.username, self.ruleForm.password, 3);
                                    }else {
                                        localStorage.setItem('checked','');
                                        //清空Cookie
                                        self.clearCookie();
                                    }
                                    /*储存 token*/
                                    localStorage.token = res.data.token;
                                    localStorage.setItem('ms_userName', res.data.user[0].user_name);
                                    localStorage.setItem('ms_loginName', res.data.user[0].user_loginname);
                                    localStorage.setItem('ms_userPk', res.data.user[0].user_pk);
                                    // localStorage.setItem('ms_organPk', res.data.organ[0].organ_pk);
                                    localStorage.setItem('ms_organPk', '1');
                                    localStorage.setItem('ms_organQhdm', '630000000000');
                                    // localStorage.setItem('ms_organName', res.data.organ[0].organ_name);
                                    localStorage.setItem('ms_organName', '测试机构');
                                    this.$post('/auth/menu/auth_button_list',{role_pk:res.data.user[0].fk_role_pk}).then(res =>{
                                        if (res)
                                        {
                                            sessionStorage.setItem('btnPermissions',res)
                                        }
                                    });
                                    /*登录成功，跳转到主页*/
                                    this.$router.push('/dashboard');
                                    this.$getAllDic(); //调用字典初始化
                                }else{
                                    this.$message({
                                        type :res.code,
                                        message: res.msg,
                                    });
                                }
                            }
                        }).catch(error => {
                            this.$message({
                                type :"",
                                message: error,
                            });
                        })
                    }
                });
            },
            //设置cookie
            setCookie(c_name, c_pwd, exdays) {
                let exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
                window.document.cookie = "username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            //读取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    let arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
                    for (let i = 0; i < arr.length; i++) {
                        let arr2 = arr[i].split('='); //再次切割
                        //判断查找相对应的值
                        if (arr2[0] == 'username') {
                            this.ruleForm.username = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'password') {
                            this.ruleForm.password = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
            }
        }
    }
</script>

<style scoped>
    @import "../../assets/css/style.css";
</style>